<!--道具卡片-->
<script lang="ts" setup>
import {type ItemData, ItemStatus, ItemTypes} from "../../network/types/Item.ts";

interface Props {
  data: ItemData
}

const props = defineProps<Props>();
</script>

<template>
  <div class="clickable" style="display:inline-block">
    <el-tooltip>
      <template #content>
        <ul>
          <li v-if="props.data.typeInfo?.permission">要求： {{ props.data.typeInfo?.permission }}</li>
          <li>效果： {{ props.data.typeInfo?.description }}</li>
          <li>时间： {{ props.data.time?.short }}</li>
        </ul>
      </template>
      <div class="item-card">
        <el-image :src="props.data.typeInfo?.url?.replace('https://img4.nga.178.com/','/static/res/')" style="width: 60px;height: 60px"/>
        <div style="max-width: 200px">
          <span>{{ props.data.typeInfo?.name }}</span>
          <span> x {{ props.data.count }}</span>
          <br>
          <el-tag effect="dark">
            {{ ItemTypes.find(it => it.typeId === props.data.type)?.label }}
          </el-tag>
          <el-tag v-if="data.bits.includes(ItemStatus.MEDAL_USED)" effect="dark" type="danger">
            使用中
          </el-tag>
        </div>
      </div>
    </el-tooltip>
  </div>
</template>

<style scoped>

</style>